﻿$.fn.cycle.defaults.timeout = 10000;
$.fn.cycle.defaults.random = false;

$(document).ready(function () {
    var $books = $('#books');

    $books.hover(function () {
        $books.find('.title').animate({
            backgroundColor: '#eee',
            color: '#000'
        }, 1000);
    }, function () {
        $books.find('.title').animate({
            backgroundColor: '#000',
            color: '#fff'
        }, 1000);
    });

    $books.find('.title').resizable({ handles: 's' });

    $('h1').click(function () {
        $(this).toggleClass('highlighted', 'slow', 'easeInExpo');

        $books.cycle('resume');
        $controls.find('button').attr('disabled', 'false');
        $('#slider').slider('enable');
    });

    //    $('#books').cycle({
    //        timeout: 2000,
    //        speed: 200,
    //        pause: true,
    //        before: function() {
    //            $('#slider').slider('value', $('#books li').index(this));
    //        }
    //    });
    //alert($.cookie('cyclePaused'));
    if ($.cookie('cyclePaused')) {
        $books.cycle('pause');
    }

    var $controls = $('<div id="books-controls"></div>');
    $controls.insertAfter($books);
    $('<Button>Pause</Button>').click(function (event) {
        event.preventDefault();
        $books.cycle('pause');
        $.cookie('cyclePaused', 'y', { path: '/', expires: 7 });
        //alert($.cookie('cyclePaused'));
    }).button({ icons: { primary: 'ui-icon-pause'} }).appendTo($controls);

    $('<Button>Resume</Button>').click(function (event) {
        event.preventDefault();
        //$books.cycle('resume');
        if ($('ul:paused').length) {
            $('ul:paused').cycle('resume');
        } else {
            $(this).effect('shake', { distance: 3 });
        }
        $.cookie('cyclePaused', null, { path: '/', expires: -1 });
        //alert($.cookie('cyclePaused'));
    }).button({ icons: { primary: 'ui-icon-play'} }).appendTo($controls);

    $('<div id="slider"></div>').slider({
        min: 0,
        max: $('#books li').length - 1,
        slide: function (event, ui) {
            $books.cycle(ui.value);
        }
    }).appendTo($controls);

    // 课后题
    //1. 把幻灯片的切换周期延长到1.5秒，把动画效果修改为下一张幻灯片淡入之前，前一张幻灯片淡出。请参考Cycle插件的文档，找到实现上述功能的选项。

    //    $('#books').cycle({
    //        fx: 'fade',
    //        timeout: 1500,
    //        speed: 2000,
    //        pause: true,
    //        before: function () {
    //            $('#slider').slider('value', $('#books li').index(this));
    //        }
    //    });

    //2. 设置名为cyclePaused的cookie，将它的有效期设置为30天。
    $.cookie('cyclePaused', 'y', { path: '/', expires: 30 });

    //3. 限制书名区域，每次缩放只允许以10像素为单位。
    //$books.find('.title').resizable({ grid: 10 });

    //4. 【未解决】修改滑动条的动画，让幻灯片切换时，滑动块从当前位置平滑地移动到下一个位置。

    //5. 不像以前那样循环播放幻灯片，而是在播放完最后一张幻灯片后停止。当幻灯片停止播放时，也禁用相应的按钮和滑动条。
    $('#books').cycle({
        fx: 'fade',
        timeout: 1500,
        speed: 2000,
        pause: true,
        after: function () {
            if ($('#books li').index(this) == $('#books li').length - 1) {
                $books.cycle('pause');
                $controls.find('button').attr('disabled', 'true');
                $('#slider').slider('disable');
            }
        }
    });

    //6. 创建一个新的jQuery UI主题，让部件背景为浅蓝色，文本为深蓝色，并将这个自定义主题应用到我们的示例文档上。
    // 参见blue theme

    //7. 【未解决】修改mobile.html中的HTML代码，让列表视图根据书名的字第一个字母分隔开来。可以参考jQuery Mobile官方中关于data-role="list-divider"的介绍。
    // <li data-role="list-divider">D</li>

});